<template>
  <div>
    <MenuList :items="menuItems">
      <template #default="{ on }">
        <v-btn v-on="on" icon>
          <v-icon>mdi-account</v-icon>
        </v-btn>
      </template>
    </MenuList>
    <LogoutDialog
      v-model="showLogoutDialog"
      @submit="logout"
      width="480"
      title="Logout"
    ></LogoutDialog>
    <ChangePasswordDialog
      v-model="showChangePasswordDialog"
      width="480"
      title="Change Password"
    ></ChangePasswordDialog>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import MenuList from "@/components/Menu/MenuList.vue";
import LogoutDialog from "./LogoutDialog.vue";
import ChangePasswordDialog from "./ChangePasswordDialog.vue";
@Component({
  components: {
    MenuList,
    LogoutDialog,
    ChangePasswordDialog,
  },
})
export default class User extends Vue {
  showLogoutDialog = false;
  openLogoutDialog() {
    this.showLogoutDialog = true;
  }
  closeLogoutDialog() {
    this.showLogoutDialog = false;
  }
  showChangePasswordDialog = false;
  openChangePasswordDialog() {
    this.showChangePasswordDialog = true;
  }
  closeChangePasswordDialog() {
    this.showChangePasswordDialog = false;
  }
  menuItems = [
    {
      icon: "mdi-lock",
      text: "Change Password",
      clickHandle: this.openChangePasswordDialog,
    },
    {
      icon: "mdi-file-move",
      text: "Logout",
      clickHandle: this.openLogoutDialog,
    },
  ];

  logout() {
    console.log("logout");
  }
}
</script>
<style lang="scss">
@import "./User.scss";
</style>
